<template>
    <Nav message="值得买"></Nav>
    <div class="bgimage">
        <!-- 标题 -->
        <p>
            值得买
            <span>严选好物 用心生活</span>
        </p>
        <!-- 轮播图 -->
        <div class="banner">
            <swiper :modules="[Grid]" :grid="{ rows: 2, fill: 'column' }" :slides-per-view="4" class="stTop">
                <swiper-slide class="stTop_child" v-for="item in bannerList" :key="item.id" @click="a(item.columnUrl)">
                    <van-grid icon-size="60px">
                        <van-grid-item :icon="item.picUrl" :text="item.mainTitle" />
                    </van-grid>
                </swiper-slide>
            </swiper>
        </div>
    </div>
    <!-- 推荐列表 -->
    <div class="romlist">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
            <van-list offset="100" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
                <van-cell v-for="item in list" :key="item.topicId" @click="clickHandler(item.schemeUrl)">
                    <van-image :src="item.picUrl" height="100" width="100%">
                    </van-image>
                    <p>{{ item.title }}</p>
                    <div>
                        <van-image round width="30" height="30"
                        :src="item.avatar" />
                        <span class="name">{{ item.nickname }}</span>
                        <span class="right"><van-icon name="eye-o" />{{ item.readCount }}</span>
                    </div>
                </van-cell>
            </van-list>
        </van-pull-refresh>
    </div>
</template>

<script lang="ts" setup>
import { Swiper, SwiperSlide } from 'swiper/vue';
import { Grid } from 'swiper';
import "swiper/css/grid";
import 'swiper/css';
import { useRecommendbanHook } from "@/hook/Recommendban"
import { useRecommendlistHook } from "@/hook/Recommendlist"
import Nav from '@/utils/Nav.vue';
let { bannerList,clickHandler:a } = useRecommendbanHook();
let { refreshing, onRefresh, loading, finished, onLoad, list,clickHandler } = useRecommendlistHook()
</script>


<style scoped lang="scss">
.bgimage {
    p {
        font-size: 30px;
        font-family: '楷体';
        font-weight: 600;
        color: white;
        padding: 40px 20px 7px;

        // 主打陪伴
        span {
            font-size: 16px;
            font-family: '黑体';
            font-weight: 300;
        }
    }

    overflow: hidden;
    background: url(https://yanxuan.nosdn.127.net/a93a392fb8006ba26dea38477979b7b4.jpg?imageView) 100%;

    .banner {
        margin: 0 10px 5px;

        .stTop {
            height: 260px;
            border-radius: 10px;
            background-color: white;
            width: 100%;

            /* background: springgreen; */
            .stTop_child {
                height: 120px;
                /* background: red; */
            }
        }

    }

}

::v-deep(.van-list) {
    border-radius: 10px;
    display: flex;
    flex-wrap: wrap;

    .van-cell {
        width: 50%;
    }

    p {
        text-align: left;
        color: black;
    }
    div{
        width: 100%;
        text-align: left;
        line-height: 30px;
        position: relative;
        .name{
            font-size: 12px;
            color: grey;
            display: inline-block;
            position: absolute;
            left: 40px;
        }
        .right{
            position: absolute;
            right: 0;
            display: inline-block;
        }
    }
}
</style>